<template slot="header">
	<view>
		<uni-nav-bar left-img="back" title="测肤记录" style="position:relative;z-index: 9999;"></uni-nav-bar>
		
		<view class="weui-margin-full" style="margin-top:50upx;">
			<view class="weui-flex" style="align-items: center;">
				<view class="weui-flex__item" style="font-weight: bold;font-size:18px;">
					{{userInfo.nickName || '护肤达人' + (userInfo.tell || '').slice(-4)}}
				</view>
				<view>
					<navigator :url="'../skin/guest-form?ID=' + this.id" Data-btnname="编辑">
						<image src="../../static/write2.png" style="height:18px;" mode="heightFix" Data-btnname="编辑">
						</image>
					</navigator>
				</view>
			</view>
			<view class="weui-flex txtStyle">
				<view style="width: 62rpx;">
					{{userInfo.sex==1 ? '男':'女' }}
				</view>
				<view v-if="userInfo.age>0" style="width: 104rpx;">
					{{userInfo.age}}岁
				</view>
				<view style="width: 200rpx;">
					{{userInfo.tell}}
				</view>
			</view>
			<view v-if="userInfo.remarks!=''" style="margin-top:5px;color: #999999;font-size:12px;">
				{{userInfo.remarks}}
			</view>
			<view class="weui-margin-top">
				<view class="Gocount" style="margin: 5px 0px;">来店次数：{{userInfo.storeCount}}</view>
				<view class="forecast" style="margin: 5px 0px;">测肤报告数：{{userInfo.skinTotal}}</view>
			</view> 
		</view>
		
		<navbar-list :url="listUrl" urlType="post" ref="navbar">
			<template slot="list" scope="{tabItem}">
				<view v-for="(item,index) in tabItem.data" :key="index" class="weui-margin-full" @click="toTest(item.id)" style="margin-top: 10px;">
					<view class="log weui-flex">
						<view style="margin-right:15px;line-height:0px;">
							<view :style="{'background-image': `url(${item.imgSize})`}"  class="tx" >
							</view>
							<!-- <image :src="item.imgurl" style="width: 108rpx;height: 108rpx;background: #D8D8D8;border-radius: 100rpx;">
							</image> -->
						</view>
						<view class="weui-flex__item">
							<view><text class="fontStyle">{{item.scores}}分</text></view>
							<view><text class="yearStyle">{{item.createTime}}</text></view>
						</view>
					</view>
				</view>
				<!-- <view style="height:260upx;"></view> -->
			</template>
		</navbar-list>
	</view>
</template>
<script>
	import navbarList from "@/components/uni-z/navbar-list.vue";
	
	var optVal;
	var page = 0;
	var pageSize=5;
	var pageMax = 0;
	// 定义全局参数,控制数据加载
	export default {
		components: { navbarList },
		data() {
			return {
				id:"",
				listUrl:"skin/list",
				newsList: [],
				testImg:"../../static/rec.png",
				userInfo: {}
			}
		},
		onLoad(opt){
			
			this.$users.checkLogin();
			
			this.id = opt.id;
			this.listUrl = "skin/list?customerArchivesId=" + opt.id
		},
		onShow(){
			let _this = this;
			_this.handleSugoioLoad('测肤记录', 'guest-record')
			this.$common.initAjax({
				url:"/customer/id?id=" + this.id,
				type:"post",
				success:(res)=>{
					if(res.code==0){
						this.userInfo = res.data;
					}
				}
			});
		},
		methods: {
			toTest(id){
				this.$common.to('../skinTestReport/index?id=' + id);
				
				// this.$common.initAjax({
				// 	url:"skin/findById?id=" + id,
				// 	success:(res)=>{
				// 		if(res.code==0){
				// 			uni.setStorageSync("item",JSON.stringify({...res.data.aiFaceResult,avatar: res.data.skinRecord.imgurl}));
				// 			this.$common.to('../skinTestReport/index?id=' + this.userInfo.id);
				// 		}
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss">
	.tx{
		width:108rpx;
		height:0;
		padding-bottom:108rpx;
		overflow:hidden;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		background-size:cover;
		border-radius: 50%;
	}
	
	.total_price {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding: 20rpx 30rpx;
		margin: 30upx 10px 0px 0px;
		line-height: 60rpx;

		.item_wrap1 {
			flex: 5;
		}

		.item_wrap2 {
			flex: 1;
		}

		image {
			padding: 0;
			margin: 0;
			height: 28rpx;
			line-height: 28rpx;
			width: 28rpx;
		}

		.total {
			text-align: center;
		}
	}

	.sName {
		width: 126rpx;
		height: 58rpx;
		font-size: 42rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
	}

	.txtStyle {
		margin: 5px 0px;
	}

	.txtStyle view {
		margin-right:10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 13px;
		border: 1px solid #FF6966;
		color: #FF6966;
		flex: 0 0 12 0rpx;
		height: 24px;
	}

	.rec {
		width: 90%;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}

	.forDataStyle {
		width: 680rpx;
		height: 160rpx;
		background: linear-gradient(124deg, #FFFFFF 0%, #FFEFEF 100%);
		border-radius: 8rpx;
		border: 1px solid rgba(255, 105, 112, 0.2);
		margin: 20px 0px 0px 20px;
	}

	.infoStyle {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 62rpx;
		height: 48rpx;
		border-radius: 13px;
		border: 1px solid #FF6966;
		flex: 0 0 12 0rpx
	}

	.content1 {
		display: flex;
		justify-content: center;
		align-items: center;
		 flex-wrap: nowrap;
		width: 30%;
	}

	.content2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: auto;
	}


	.fontStyle {
		width: 108rpx;
		height: 58rpx;
		font-size: 42rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF6966;
		line-height: 58rpx;
	}

	.yearStyle {
		width: 196rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}



	.Gocount {
		width: auto;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;

	}

	.forecast {
		width: auto;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	
	
	.log{
		padding:20upx 30upx;
		background: linear-gradient(124deg, #FFFFFF 0%, #FFEFEF 100%);
		border-radius: 4px;
		border: 1px solid rgba(255, 105, 112, 0.2);
	}
</style>
